<template>
    <div class="tab-bar-item" @click="itemClick"> 
        <slot v-if="!isActive" name="item-icon"></slot>
        <slot v-else name="item-icon-active"></slot>         
        <div :style="activeStyle">
            <slot name="item-text"></slot>
        </div>

    </div>

</template>

<script>
    export default{
        name: "TabBarItem",
        props:{
            path: String,
            activeColor:{
                type: String,
                default:'purple',
            }
        },

        computed:{
            isActive(){
                return this.$route.path.indexOf(this.path) !== -1
            },
            // 先请求上一个函数isActive函数是否处于活跃，有则读取传入的颜色
            activeStyle(){
                return this.isActive?{color:this.activeColor}:{}
            }
        }
        ,
        methods:{
            itemClick(){
                this.$router.replace(this.path)
            }
        }
    }

</script>

<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
    background-color: #f6f6f6;
  }
    .tab-bar-item img{
        height: 24px;
        width: 24px;
        margin-top: 3px;
        vertical-align: middle;
        margin-bottom: 2px;
    }

    /* .active{
        color: red;
    } */

</style>